#base {
    width: 100%;
    height: 100%;
}

#main {
    display: none;
    width: 100%;
    height: 100%;
}

#songs {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

#songlisttop {
    height: 185px;
    width: 100%;
}

#songlist {
    height: 100%;
    display: none;
    width: 100%;
    overflow: scroll;
}

#headerbck {
    background-color: #DEDEDEFF;
    width: 100%;
    height: 150px;
}

#header {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;    
}

#filterbarbck {
    top: 150px;
    width: 100%;
    height: 35px;
    background-color: #FFFFFFFF;
    box-shadow: 5px #0000000A;
}

#filterbar {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
}

.filterbtnbck {
    width: 35px;
    height: 30px;
}

.inputfield_clear_btn {
    background-color: #FFFFFFFF;
    right: 5px;
    top: 5px;
    width: 25px;
    height: 25px;
    border-radius: 5px;
    box-shadow: 3px #00000022;
}

#filterbtn {
    background-color: #FFFFFFFF;
    left: 5px;
    top: 5px;
    width: 25px;
    height: 25px;
    border-radius: 5px;
    box-shadow: 3px #00000022;
}

#filtericon {
    left: -2px;
    top: -2px;
    width: 30px;
    height: 30px;
    background-image: url("editor.png");
    blocks: no;
}

#filterfield {
    background-color: #FFFFFFFF;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#toolbar {
    width: 460px;
    height: 30px;
    margin: auto;
    left: 20px;
    top: 10px;
    display: flex;
    flex-direction: row;
}

.popup_page {
    width: 100%;
    height: 100%;
}

.timebck {
    width: 80px;
    height: 30px;
    background-color: #FFFFFFFF;
    border-radius: 10px;
    box-shadow: 5px #0000000A;
}

.timetf {
    width: 100%;
    height: 100%;
    top: 1px;
    blocks: no;
}

.gap {
    width: 5px;
}

#songbck {
    top: 50px;
    margin: auto;
    width: 460px;
    height: 90px;
    background-color: #FFFFFFFF;
    border-radius: 15px;
    box-shadow: 5px #0000000A;
}

#song_info {
    top: 0px;
    width: 460px;
    height: 90px;
}

#artistbtn {
    width: 150px;
    height: 100%;
    background-color: #EFEFEFFF;
}

#genrelist {
    display: none;
    width: 212px;
    height: 100%;
    left: 0px;
    background-color: #FFFFFFFF;
}

#artistlist {
    display: none;
    width: 212px;
    height: 100%;
    right: 0px;
    background-color: #FFFFFFFF;
}

#songlistheader {
    background-color: #222222FF;
    top: 185px;
    width: 100%;
    height: 30px;
}

.headedge {
    width: 100%;
    height: 100%;
    display: none;
    align-items: center;
}

.headcenter {
    width: 500px;
    height: 100%;
    display: none;
}

.stretch {
    width: 100%;
    height: 100%;
    display: none;
    background-color: #FF00000A;
}

#loopbtn {
    width: 40px;
    height: 40px;
    right: 20px;
    top: 20px;    
    border-radius: 8px;
    background-color: #EEEEEEFF;
    box-shadow: 3px;
}

#loopicon {
    width: 40px;
    height: 40px;
    background-image: url("loop.png");
}

#seekknob {
    width: 100px;
    height: 100px;
    right: 20px;
    padding: 0px;
}

#playbtn {
    width: 40px;
    height: 40px;
    top: 30px;
    left: 30px;
    padding: 15px;
}

#playicon {
    width: 40px;
    height: 40px;
    background-image: url("play.png");
    blocks: no;
}

#pauseicon {
    width: 40px;
    height: 40px;
    background-image: url("pause.png");
    blocks: no;
}

#volknob {
    width: 100px;
    height: 100px;
    left: 20px;
    padding: 15px;
}

#mutebtn {
    width: 40px;
    height: 40px;
    top: 30px;
    right: 30px;
    padding: 15px;
}

#muteicon {
    width: 40px;
    height: 40px;
    background-image: url("mute.png");
    blocks: no;
}

#unmuteicon {
    width: 40px;
    height: 40px;
    background-image: url("unmute.png");
    blocks: no;
}

#display {
    width: 100%;
    height: 100%;
    margin: 10px;
    border-radius: 15px;
    background-color: #EEEEEEFF;
    box-shadow: 3px;
}

#messages_popup {
    width: 700px;
    height: 620px;
    top: 210px;
    margin: auto;
    display: none;
}

.popupshadow {
    width: 100%;
    height: 100%;
    margin: 20px;
    border-radius: 15px;
    background-color: #FFFFFFFF;
    box-shadow: 30px #00000012;
}

#messages_popup_list {
    overflow: hidden;
    width: 100%;
    height: 100%;
    margin: 5px;
    border-radius: 15px;
    background-color: #FFFFFFFF;
}

#settingslist {
    overflow: hidden;
    width: 100%;
    height: 100%;
    margin: 5px;
    border-radius: 10px;
    background-color: #EEEEEEFF;
}

.popup_content {
    width: 100%;
    height: 100%;
    margin: 5px;
    border-radius: 10px;
    background-color: #EEEEEEFF;
}

#filters_popup {
    width: 480px;
    height: 620px;
    top: 210px;
    margin: auto;
    display: none;
}

#filterlist {
    overflow: hidden;
    width: 100%;
    height: 100%;
    margin: 5px;
    border-radius: 15px;
    background-color: #FFFFFFFF;
    box-shadow: 2px;
}

#song_editor_popup {
    width: 750px;
    height: 520px;
    top: 300px;
    margin: auto;
}

#song_editor_list_back {
    overflow: hidden;
    width: 520px;
    height: 410px;
    top: 50px;
    left: 10px;
    border-radius: 10px;
    background-color: #FFFFFFFF;
}

#editorlist {
    width: 100%;
    height: 100%;
    background-color: #FFFFFFFF;
}

#song_editor {
    width: 100%;
    height: 100%;
    margin: 5px;
    border-radius: 12px;
    background-color: #EEEEEEFF;
}

#song_editor_header {
    width: 670px;
    left: 10px;
    top: 10px;
    height: 30px;
}

#coverview {
    top: 50px;
    right: 10px;
    width: 150px;
    height: 150px;
    border-radius: 15px;
    background-color: #000000FF;
    box-shadow: 3px;
}

#uploadbtnbck {
    top: 210px;
    right: 10px;
    width: 150px;
    height: 30px;
    background-color: #FFFFFFFF;
    border-radius: 10px;
}

#uploadbtn {
    width: 100%;
    height: 100%;
}

#newfieldbtnbck {
    top: 250px;
    right: 10px;
    width: 150px;
    height: 30px;
    background-color: #FFFFFFFF;
    border-radius: 10px;
}

#newfieldbtn {
    width: 100%;
    height: 100%;
}

#settings_popup {
    width: 700px;
    height: 340px;
    top: 220px;
    margin: auto;
}

#settings {
    overflow: hidden;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    background-color: #EEEEEEFF;
    box-shadow: 2px;
}

#song_popup {
    width: 300px;
    height: 350px;
    top: 220px;
    margin: auto;
}

#song_popup_list {
    overflow: hidden;
    width: 100%;
    height: 100%;
    margin: 5px;
    border-radius: 10px;
    background-color: #EEEEEEFF;
}

#decision_popup {
    width: 600px;
    height: 220px;
    top: 220px;
    margin: auto;
}

#dec_pop_tf {
    top: 20px;
    width: 500px;
    height: 100px;
    margin: auto;
}

#dec_pop_rej_btn {
    background-color: #FF5555FF;
    width: 30px;
    height: 30px;
    bottom: 12px;
    border-radius: 14px;
    right: 54px;
}

#dec_pop_acc_btn {
    background-color: #55FF55FF;
    width: 30px;
    height: 30px;
    bottom: 12px;
    border-radius: 14px;
    right: 12px;
}

#simple_popup {
    width: 600px;
    height: 200px;
    top: 220px;
    margin: auto;
}

#simple_pop_acc_btn {
    background-color: #55FF55FF;
    width: 30px;
    height: 30px;
    bottom: 12px;
    border-radius: 14px;
    right: 12px;
}

#sim_pop_txt {
    width: 100%;
    height: 100%;
}

#about_popup {
    width: 520px;
    height: 650px;
    top: 220px;
    margin: auto;
}

#aboutlist {
    overflow: hidden;
    width: 100%;
    height: 100%;
    margin: 5px;
    border-radius: 12px;
    background-color: #EEEEEEFF;
}

#home_info_txt {
    top: 10px;
    width: 400px;
    height: 160px;
    margin: auto;
}

#home_donate_btn {
    top: 170px;
    background-color: #FFFFFFFF;
    width: 200px;
    height: 30px;
    margin: auto;
    border-radius: 14px;
    box-shadow: 3px;
}

#home_donate_btn_txt {
    width: 100%;
    height: 100%;
}

#home_support_btn {
    top: 210px;
    background-color: #FFFFFFFF;
    width: 200px;
    height: 30px;
    margin: auto;
    border-radius: 14px;
    box-shadow: 3px;
}

#home_support_btn_txt {
    width: 100%;
    height: 100%;
}

#home_src_btn {
    top: 250px;
    background-color: #FFFFFFFF;
    width: 200px;
    height: 30px;
    margin: auto;
    border-radius: 14px;
    box-shadow: 3px;
}

#home_src_btn_txt {
    width: 100%;
    height: 100%;
}

#home_yt_btn {
    top: 290px;
    background-color: #FFFFFFFF;
    width: 200px;
    height: 30px;
    margin: auto;
    border-radius: 14px;
    box-shadow: 3px;
}

#home_yt_btn_txt {
    width: 100%;
    height: 100%;
}

#about {
    overflow: hidden;
    width: 100%;
    height: 100%;
    border-radius: 15px;
    background-color: #FFFFFFFF;
    box-shadow: 2px;
}

#search {
    width: 150px;
    height: 150px;
    background-color: #998899FF;
    box-shadow: 5px #0000000A;
}

#footer {
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: 170px;
    display: flex;
    flex-direction: row;
    blocks: no;
}
    
.footedge {
    display: none;
    width: 100%;
    height: 100%;
    background-color: #00FF0001;
    blocks: no;
}

.footcenter {
    display: none;
    width: 150px;
    height: 100%;
    background-color: #0000FF01;
}

#visuleft {
    width: 300px;
    height: 150px;
    background-color: #000000FF;
    border-radius: 15px;
    right: 10px;
    box-shadow: 3px;
    align-items: center;
}

#visuright {
    width: 300px;
    height: 150px;
    background-color: #000000FF;
    border-radius: 15px;
    left: 10px;
    box-shadow: 3px;
    align-items: center;
}

#visuvideo {
    width: 150px;
    height: 150px;
    border-radius: 15px;
    background-color: #000000FF;
    box-shadow: 3px;
}

#lib_init_page {
    width: 100%;
    height: 100%;
    display: none;
    align-items: center;
}

#lib_init_page_back {
    width: 600px;
    height: 180px;
    margin: auto;
}

.ch_lib_tf {
    width: 460px;
    height: 70px;
    margin: auto;
}

.ch_lib_if_back {
    bottom: 10px;
    left: 10px;
    width: 445px;
    height: 35px;
    border-radius: 10px;
    background-color: #FFFFFFFF;
    overflow: hidden;
}

.ch_lib_lv {
    width: 400px;
    height: 100%;
}

.ch_lib_if {
    width: 400px;
    height: 100%;
}

#app_maximize_btn {
    background-color: #FFFFFFFF;
    width: 30px;
    height: 30px;
    top:60px;
    left: 155px;
    border-radius: 14px;
    box-shadow: 5px #0000000A;
}

#maxicon {
    width: 30px;
    height: 30px;
    background-image: url("max.png");
    blocks: no;
}

.closebtn {
    background-color: #FFFFFFFF;
    width: 30px;
    height: 30px;
    right: 155px;
    top: 60px;
    border-radius: 14px;
    box-shadow: 5px #0000000A;
}

.closepopupbtn {
    background-color: #FFFFFFFF;
    margin: auto;
    top: -5px;
    width: 30px;
    height: 30px;
    border-radius: 14px;
    box-shadow: 10px #00000012;
}

.closeicon {
    width: 30px;
    height: 30px;
    background-image: url("close.png");
    blocks: no;
}

.accepticon {
    width: 30px;
    height: 30px;
    background-image: url("accept.png");
    blocks: no;
}

#prevbtn {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background-color: #FFFFFFFF;
    box-shadow: 5px #0000000A;
}

.previcon {
    width: 30px;
    height: 30px;
    background-image: url("prev.png");
    blocks: no;
}

#nextbtn {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background-color: #FFFFFFFF;
    box-shadow: 5px #0000000A;
}

.nexticon {
    width: 30px;
    height: 30px;
    background-image: url("next.png");
    blocks: no;
}

#shufflebtn {
    width: 30px;
    height: 30px;
}

#shuffleoff {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background-color: #FFFFFFFF;
    blocks: no;
    box-shadow: 5px #0000000A;
}

#shuffleon {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background-color: #00000022;
    blocks: no;
    box-shadow: 5px #0000000A;
}

#shuffleicon {
    width: 30px;
    height: 30px;
    background-image: url("shuffle.png");
    blocks: no;
}

#settingsbtn {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background-color: #FFFFFFFF;
    box-shadow: 5px #0000000A;
}

#settingsicon {
    width: 30px;
    height: 30px;
    background-image: url("settings.png");
    blocks: no;
}

#aboutbtn {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background-color: #FFFFFFFF;
    box-shadow: 5px #0000000A;
}

#abouticon {
    width: 30px;
    height: 30px;
    background-image: url("home.png");
    blocks: no;
}

#editbtn {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background-color: #FFFFFFFF;
    box-shadow: 5px #0000000A;
}

#editicon {
    width: 30px;
    height: 30px;
    background-image: url("editor.png");
    blocks: no;
}

.acceptbtn {
    background-color: #55FF55FF;
    width: 30px;
    height: 30px;
    right: 12px;
    bottom: 12px;
    border-radius: 14px;
}

.rejectbtn {
    background-color: #FF5555FF;
    width: 30px;
    height: 30px;
    right: 54px;
    bottom: 12px;
    border-radius: 14px;
}

#editor_popup_reject_btn {
    background-color: #FF5555FF;
    width: 30px;
    height: 30px;
    right: 54px;
    bottom: 12px;
    border-radius: 14px;
}

#lib_change_popup {
    width: 600px;
    height: 180px;
    margin: auto;
    top: 190px;
}

#inp_popup {
    width: 600px;
    height: 180px;
    margin: auto;
    top: 190px;
}

.visuchange_btn_bck {
    width: 30px;
    height: 30px;
    margin: auto;
}

.visuchange_btn {
    width: 30px;
    height: 30px;
    border-radius: 14px;
    background-color: #FFFFFFFF;
}


.if_clear_btn_back {
    background-color: #FFFFFFFF;
    right: 5px;
    top: 5px;
    width: 25px;
    height: 25px;
    border-radius: 5px;
    box-shadow: 3px #00000022;
}

.if_clear_btn {
    width: 100%;
    height: 100%;
}

.if_clear_btn_icon {
    left: -2px;
    top: -2px;
    width: 30px;
    height: 30px;
    background-image: url("close.png");
    blocks: no;
}

.editor_if_back {
    bottom: 10px;
    left: 10px;
    width: 380px;
    height: 35px;
    border-radius: 10px;
    background-color: #AAFFAAFF;
    overflow: hidden;
}

.editor_lib_lv {
    width: 380px;
    height: 100%;
}

.editor_lib_if {
    width: 380px;
    height: 100%;
}

